import React, { useState } from 'react';
import {MyBreadcrumb} from '@/components/myBreadcrumb'
import TableList from './TableList'
import { connect, Dispatch } from 'umi'
import { useMount } from 'ahooks';
import { IPro } from './pro';
import { Form, Input, Button, Select } from 'antd';
import styles from './index.less'
import { getCategoryListReq, getSearchListReq } from '@/service/pro'
const { Option } = Select
type SeckillListProps = {
  seckillList: Array<IPro>
  dispatch: Dispatch
};
const index:React.FC<SeckillListProps> = (props) => {
  const { seckillList, dispatch } = props
  const [ categoryList, setCategoryList] = useState([])
  useMount(() => {
    getCategoryListReq().then(res => {
      console.log(res.data)
      setCategoryList(res.data)
    })
    dispatch({
      type: 'pro/getSeckillListEffect',
      payload: {
        type: 'isseckill',
        flag: 1
      }
    })
  })
  const [form] = Form.useForm();
  return (
    <>
      <MyBreadcrumb />
      <div className = { styles.table_box }>
        {/* <Space direction="vertical"> */}
          <Form
            layout="inline"
            form={form}
            initialValues={{
              category: '',
              search: ''
            }}
            onFinish = { (values) => {
              console.log(values)
              getSearchListReq(values).then(res => {
                console.log(res)
                const arr = res.data.filter((item: IPro) => item.isseckill === 1)
                dispatch({ // 也可以直接触发 dva数据流的 reducers
                  type: 'pro/UPDATE_SECKILL_LIST',
                  payload: arr
                })
              })
            }}
          >
            <Form.Item
              name="category"
            >
              <Select placeholder="请选择分类" style={{ width: 200}}>
                <Option value=''>全部</Option>
                {
                  categoryList.map(item => <Option key={item} value={item}>{item}</Option>)
                }
              </Select>
            </Form.Item>
            <Form.Item name="search">
              <Input placeholder="请输入需要搜索的关键词" />
            </Form.Item>
            <Form.Item>
              {/* htmlType="submit" */}
              <Button htmlType="submit" type="primary">搜索</Button>
            </Form.Item>
          </Form>
          <div style={{ height: 20}}></div>
          <TableList dataSource = { seckillList }/>
        {/* </Space> */}

      </div>
    </>
  )
}
export default connect(state => {
  console.log(state)
  return {
    seckillList: state.pro.seckillList
  }
})(index);
